import React from 'react'
import ReactDOM from 'react-dom'
import Toast from './toast'
import './toast.css'

const div = document.createElement('div')
div.id = 'Toast_model'
const notification = ReactDOM.render(<Toast />, div)

const createNotification = {
    addNotice(notice) {
        document.body.appendChild(div)
        return notification.addNotice(notice)
    },
    destroy() {
        const dom = document.getElementById('Toast_model')
        if (dom&&dom.childNodes.length > 0){
            document.body.removeChild(dom) 
            // ReactDOM.unmountComponentAtNode(div)
        }
    }
}
const notice = (type, content, duration = 2000, onClose, close) => {
    return type === 'close' ? createNotification.destroy() : createNotification.addNotice({ type, content, duration, onClose })
    // return type === 'close' ? createNotification.removeNotice() : createNotification.addNotice({ type, content, duration, onClose })
    
}

export default {
    info(content, duration, onClose) {
        return notice('info', content, duration, onClose)
    },
    success(content = '操作成功', duration, onClose) {
        return notice('success', content, duration, onClose)
    },
    error(content, duration, onClose) {
        return notice('error', content, duration, onClose)
    },
    loading(content = '加载中...', duration = 0, onClose) {
        return notice('loading', content, duration, onClose)
    },
    close() {
        return notice('close')
    }
}